<template>
  <Table :show-header="true" :columns="columns" :data="data">
    <template slot="header">
      <th v-for="(item, index) in columns">
        <div class="ivu-table-cell">
          <span class="">{{item.title}}</span>
        </div>
      </th>
      <!-- 在这里添加更多的自定义列 -->
    </template>
  </Table>
</template>
<script>
// 导入插件
import Sortable from 'sortablejs'
export default {
  data() {
    return {
      //表格头
      columns: [
        {
          title: '姓名',
          key: 'name',
        },
        {
          title: '年龄',
          key: 'age',
        },
        {
          title: '爱好',
          key: 'hobby',
        },
        {
          title: '电话',
          key: 'phone',
        },
        {
          title: '性别',
          key: 'sex',
        },
        {
          title: '心情',
          key: 'status',
        },
      ],
      //表格数据
      data: [
        {
          name: 'jack',
          age: 18,
          hobby: '篮球',
          phone: 1239742,
          sex: 'M',
          status: 0,
        },
        {
          name: '娜娜',
          age: 16,
          hobby: '跳',
          phone: 13745134,
          sex: 'F',
          status: 1,
        },
        {
          name: '你干嘛~',
          age: 24,
          hobby: 'rap',
          phone: 5201413,
          sex: 'M',
          status: 1,
        },
      ],
    }
  },
  mounted() {
    this.columnDrop()
  },
  methods: {
    //列拖拽
    columnDrop() {
      const wrapperTr = document.querySelector('.ivu-table-header tr')
      this.sortable = Sortable.create(wrapperTr, {
        animation: 180,
        delay: 0,
        onEnd: evt => {
          console.log(evt.oldIndex, evt.newIndex)
          console.log('evt', evt)
          if (evt.oldIndex === evt.newIndex) return
          //表头排序
          // 这里-2是因为表格头前两列是上面HTML中自己定义的序号列和勾选列，columns数据中没有定义该两列，所以操作数组的时候要排除掉这两项
          console.log(this.columns)
          this.moveArr(this.columns, evt.newIndex, evt.oldIndex)
          // const oldItem = this.columns[evt.oldIndex];
          // const newItem = this.columns[evt.newIndex];
          // this.$set(this.columnsConfig, evt.newIndex, oldItem);
          // this.$set(this.columnsConfig, evt.oldIndex, newItem);
        },
      })
    },
    //移动数组元素至某个指定位置
    moveArr(arr, newIndex, oldIndex) {
      arr.splice(newIndex, 0, arr.splice(oldIndex, 1)[0])
      console.log('arr', arr)
      /** splice 会更改原来数组的数据 */
      /**  list.splice(oldIndex, 1)[0] 删除旧数据位置返回删除的数据 */
      /** list.splice(newIndex, 0, old)  相当于把删除的旧数据插入到新的位置上去 */
    },
  },
}
</script>
